//空组件
const Default={template:"<div></div>"};
//主程序组件
const MainProgram={template:`<div class="common-layout">
				<el-container>
					<el-header class="header">
						<el-page-header icon="Tools" title="设置">
							<template #content>
								<div class="flex items-center">
									<el-avatar @click="TestFunction()" :size="40" class="mr-3" style="cursor: pointer;"
										src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
									</el-avatar>
									<span class="text-large font-600 mr-3">{{Data.UserName}}</span>
								</div>
							</template>
							<template #extra>
								<el-badge :value="Data.MessageNumber" :max="99" :show-zero="false" class="item">
								<el-icon size="40">
									<Message />
								</el-icon>
								</el-badge>
							</template>
						</el-page-header>
					</el-header>
					<el-main class="main">
					</el-main>
					<el-footer class="footer">Footer</el-footer>
				</el-container>
			</div>`,
			setup() {
				const Testdata = ref(1);
				const Data = ref({
					UserName: "默认用户",
					MessageNumber: 0
				});
				function TestFunction(){
					console.log(app);
					
				};
				return {
					Testdata,
					Data,
					TestFunction,
				}
			}
};
//登陆组件
const Login={template:`			
			<div class="wrapper">
				<div class="card-switch">
					<label class="switch">
						<input class="toggle" type="checkbox" id="flipToggle">
						<span class="slider"></span>
						<span class="card-side"></span>
						<div class="flip-card__inner">
							<div class="flip-card__front">
								<div class="title">登陆</div>
								<el-form :rules="FormRule" :model="LanDingData"class="flip-card__form">
									<el-form-item prop="Account">
										<el-input placeholder="账号"
											class="flip-card__input" type="text" v-model="LanDingData.Account"/>
									</el-form-item>
									<el-form-item prop="PassWord">
										<el-input placeholder="密码"
											class="flip-card__input" type="password" v-model="LanDingData.PassWord"/>
									</el-form-item>
									<el-button class="flip-card__btn" @click="LanDing">登陆</el-button>
								</el-form>
							</div>
							<div class="flip-card__back">
								<div class="title">注册</div>
								<el-form class="flip-card__form" :rules="FormRule" :model="SignUpData">
									<el-form-item prop="Account">
										<el-input placeholder="账号"
											class="flip-card__input" type="text" v-model="SignUpData.Account" />
									</el-form-item>
									<el-form-item prop="PassWord">
										<el-input placeholder="密码"
											class="flip-card__input" type="password" v-model="SignUpData.PassWord" />
									</el-form-item>
									<el-button class="flip-card__btn" @click="SignUp">注册</el-button>
								</el-form>
							</div>
						</div>
					</label>
				</div>
			</div>`,
			setup() {
				const LanDingData = ref({
					Account: "",
					PassWord: ""
				});
				const SignUpData=ref({
					Account: "",
					PassWord: ""
				});
				const FormRule=ref({
					Account:[
						{pattern: "^[A-Za-z0-9]+$",message: '只能输入英文和数字',trigger: 'change'},
					],
					PassWord:[
						{pattern: "^[A-Za-z0-9]+$",message: '只能输入英文和数字',trigger: 'change'},
					]
						
				});
				//登陆方法
				function LanDing() {
					//过滤非法字符
					const Account = LanDingData.value.Account.replace(/^[A-Za-z0-9]+$/g, "");
					const PassWord = LanDingData.value.PassWord.replace(/^[A-Za-z0-9]+$/g, "");
					if(Account===""&&PassWord==="")
					{
						axios.post('./api/API.php?OP=Landing', {
							  Account:LanDingData.value.Account,
							  PassWord:LanDingData.value.PassWord,
						  	})
						  	.then(response => {
								store.commit('UpToken',response.data);//更新Token
								store.commit('UpLogin',true);//更新登陆状态							
								router.push('/MainProgram');//跳转至主程序页面
								
						  	})
						  	.catch(function(error) {
						  		ElMessage({
						  		    message: error.response.data['Error'],
						  		    type: 'warning',
						  		  }); 
						  	});
					}
				};
				//注册方法
				function SignUp(){
					//过滤非法字符
					const Account = SignUpData.value.Account.replace(/^[A-Za-z0-9]+$/g, "");
					const PassWord = SignUpData.value.PassWord.replace(/^[A-Za-z0-9]+$/g, "");
					if(Account===""&&PassWord==="")
					{
						axios.post('./api/API.php?OP=SignUp', {
							  Account:SignUpData.value.Account,
							  PassWord:SignUpData.value.PassWord,
						  	})
						  	.then(response => {
								ElMessage({
								    message: '注册成功 自动登陆',
								    type: 'success',
								  });
								store.commit('UpToken',response.data);//更新Token
								store.commit('UpLogin',true);//更新登陆状态			
								router.push('/MainProgram');//跳转至主程序页面
						  	})
						  	.catch(function(error) {
						  		ElMessage({
						  		    message: error['Error'],
						  		    type: 'success',
						  		  });
						  	});
					}
				};
				return {
					LanDing,
					LanDingData,
					FormRule,
					SignUpData,
					SignUp,					
				}
			}
			}